<template>
  <div class="record">

    <div class="next">
      <fiddel :is-recording="isRecording" class="fiddle" v-if="isRecording"/>
      <my-img
        :src="currentPlayState === 'voice'?'yr-p.gif':'yr.png'"
        @tap="playRecordVoice"
        class-name="btn-rec-ico fiddle"
        v-if="showNextButton"
      />
      <div class="btn-rec">
        <!--        // 绿色-->
        <my-img
          @touchend="endRecord"
          @touchcancel="endRecord"
          @longtap="startRecord"
          :class-name="(showRecordButton && isRecording) ? ( 'btn-rec-ico' + ' ' + 'ico-s') : ('btn-rec-ico' + ' ' +  'ico-s1')"
          src="btn_record_s@2x.png"
          v-if="showRecordButton"/>
        <p v-if="showRecordButton">{{ recordPath || upload_audio ? '重新录音' : '长按录音' }}</p>

        <!--        // 灰色-->
        <my-img class="gray-filter" class-name="btn-rec-ico ico-s" src="btn_record_s@2x.png"
                @tap="Toast({title:'请等观看结束后录音哦！'})" v-if="!showRecordButton"/>

      </div>
      <fiddel
        :is-recording="isRecording"
        class="fiddle"
        v-if="isRecording"/>
      <my-img
        @tap="next"
        class-name="btn-rec-ico fiddle" src="yb.png"
        v-if="showNextButton"
      />
    </div>

  </div>
</template>

<script>
  import { mapActions, mapGetters, mapState } from 'vuex'
  import Fiddel from '../fiddle/fiddle'
  import { Toast } from "../../utils/modal";


  export default {
    name: "record",

    components: {
      Fiddel
    },
    computed: {
      ...mapGetters('Tools', ['showRecordButton', 'showNextButton']),
      ...mapState('Course', ['lessonDetail', 'lessonList']),
      ...mapState('Tools', ['isRecording', 'voicePlay', 'currentPlayState', 'recordPath', 'upload_audio'])
    },
    methods: {
      ...mapActions('Course', ['reqLessonDetail', 'reqCompleteTask']),
      ...mapActions('Tools', ['startRecord', 'endRecord', 'playVoice', 'startAnimation', 'playRecordVoice', 'playNext', '_playNext', 'stopRecord']),
      Toast,
      next() {
        this.$emit('next')
      }
    },
    destroyed() {
      this.stopRecord()
    }
  }
</script>

<style lang="scss" scoped>
  .record {
    .next {
      width: upx(570);
      justify-content: center;
      align-items: center;
      display: flex;
      margin: auto;

      .fiddle {
        margin-top: upx(-0);
      }
    }
  }

</style>
